<script lang="ts" setup>
withDefaults(defineProps<{ modelValue?: boolean }>(), {
    modelValue: false,
})

const emit = defineEmits(['update:modelValue'])

const handleChange = (e: Event) => {
    const target = e.target as HTMLInputElement
    emit('update:modelValue', !target.checked)
}
</script>

<template>
    <div class="umrp-checkbox">
        <input type="checkbox" :checked="!modelValue" @change="handleChange" />
        <slot></slot>
    </div>
</template>

<style lang="scss" scoped>
.umrp-checkbox {
    display: flex;
    gap: 10px;
}
</style>